<template>
  <div class="image-wrapper">
    <div class="content-wrapper">
      <div class="panel-wrapper">
        <div>
          <div class="panel-title">
            <div class="panel-title-text1">
              酒用优质高粱种植区 <br />
              数字化监测管理平台
            </div>
            <div class="panel-title-text2 p-t-1rem">
              <i style="display: flex; align-items: center">
                <span style="display: flex; align-items: center">
                  <el-icon size="20" class="i-ep-success-filled" /> 全面
                </span>
                <span style="display: flex; align-items: center" class="m-l-1.5rem"
                  ><el-icon size="20" class="i-ep-success-filled" /> 连贯
                </span>
                <span style="display: flex; align-items: center" class="m-l-1.5rem"
                  ><el-icon size="20" class="i-ep-success-filled" /> 数字化
                </span>
              </i>
            </div>
          </div>
        </div>
        <div>
          <div class="login-wrapper">
            <div class="rd-lg p-1rem">
              <div class="border p-b-4.5rem font-size-2rem font-bold">登录</div>
              <el-form label-width="auto" :model="loginForm">
                <el-form-item>
                  <el-input v-model="loginForm.email" size="large" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item>
                  <el-input
                    v-model="loginForm.password"
                    type="password"
                    show-password
                    size="large"
                    placeholder="请输入密码"
                  />
                </el-form-item>
              </el-form>
              <div div class="p-b-2.8rem p-t-0.5rem">
                <el-button size="large" type="default" @click="handleCancel" class="w-48%">
                  取消
                </el-button>
                <el-button size="large" type="primary" @click="handleLogin" class="w-48%">
                  登录
                </el-button>
              </div>
              <el-divider>
                <span class="color-#606266">其他方式</span>
              </el-divider>
              <div class="flex justify-around">
                <router-link to="/temp" class="w-100%">
                  <el-button size="large" type="default" @click="handleCancel" class="w-100%">
                    访客进入
                  </el-button>
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { login } from "@/modules/user";
import router from "@/router";

const loginForm = reactive({
  email: "",
  password: ""
});

const handleCancel = () => {
  loginForm.email = "";
  loginForm.password = "";
};

const handleLogin = async () => {
  if (
    await login({
      email: loginForm.email,
      password: loginForm.password
    })
  ) {
    router.push("/temp");
  }
};
</script>

<style scoped>
.image-wrapper {
  width: 100vw;
  height: 100vh;
  background-image: url("/public/hongyingzi.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.panel-wrapper {
  display: flex;
  width: 85vw;
  height: 100vh;
  align-items: center;
  justify-content: space-around;
  max-width: 1180px;
}

.panel-title {
  font-family: "微软雅黑", sans-serif;
  color: white;
  text-shadow: 2px 2px 3px #383838;
}

.panel-title-text1 {
  font-size: 3rem;
  letter-spacing: 0.2rem;
}

.panel-title-text2 {
  font-size: 1.2rem;
}

.login-wrapper {
  width: 24rem;
  height: 28rem;
  padding: 1rem;
  background-color: white;
  border-radius: 0.5rem;
}
</style>
